<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/*
			可以很明显的看到图片下面留有底白
			图片前面有个“幽灵空白节点”，这个节点的基线为x的底部
			图片的基线为自身的底部
			这个节点是有默认行高的，字体也是有高度的，虽然看不见，但确实存在
			那么问题就来了，图片的基线就是自身的底部，与节点的基线对齐之后，那节点的基线下面的行距(也叫半行距)依然存在，
			所以就会产生底部空白
			
			那么如何消除这个小问题呢？
			1. 图片块状化  display:block;
			2. line-height足够小  line-height: 0;
			3. font-size足够小  font-size: 0;
			4. 图片设置其他vertical-align属性值即可
			*/
			.a{
				border: 1px solid;
				width: 400px;
				/* line-height: 0; */
				/* font-size: 0; */
				
			}
			img{
				/* display:block; */
				/* vertical-align: middle; */
			}
		</style>
	</head>
	<body>
		<div class="a">
			<img src="../img/1.jpg" width="200" >
		</div>
	</body>
</html>
